<template>
    <p-card>

        <p-table bordered :columns="tableColumns" :dataSource="tableData">

        </p-table>
        <p-tabs default-active-key="1" >
            <p-tab-pane key="1" tab="产品/物料明细">
                <p-table bordered :columns="detailTableColumns" :dataSource="tableData[0].mesQcQualityFileProductDetailList">

                </p-table>
            </p-tab-pane>
            <p-tab-pane key="2" tab="详细模板">
                <p-table bordered
                         :columns="(tableData[0].templateType==1||tableData[0].templateType==2)?templateTableColumns:templateTableColumns1"
                         :dataSource="tableData[0].mesQcDetailTemplateMaintainList">
                </p-table>
            </p-tab-pane>
        </p-tabs>


        <p-tabs default-active-key="first">
            <p-tab-pane key="first" tab="流程记录">
                <p-table bordered :columns="recordColumns" :dataSource="recordData">

                </p-table>
            </p-tab-pane>
            <p-tab-pane key="second" tab="流程图" force-render>
                <div class="processPreview" >
                    <iframe class="iframCom" v-if="curUrl" :src="curUrl" frameborder="0"></iframe>
                </div>

                <!-- <iframCom :process-instance-id="processInstanceId" />-->
            </p-tab-pane>
        </p-tabs>

        <p-row></p-row>
        <p-descriptions title="流程处理" bordered v-if="tableData[0].status==2">
            <p-descriptions-item label="操作" :span="3">
                <p-radio-group name="radioGroup" v-model="result">
                    <p-radio value="process_over">
                        同意
                    </p-radio>
                    <p-radio value="task_reject">
                        驳回
                    </p-radio>
                </p-radio-group>
            </p-descriptions-item>

            <p-descriptions-item label="处理意见" :span="3">
                <p-textarea
                        v-model="value"
                        placeholder="请输入内容"
                        :auto-size="{ minRows: 3, maxRows: 5 }"
                        style="width:70%;margin-right: 10px"
                />
                <p-button type="primary" style="width:70px;height:70px" @click="submitData">提交</p-button>
            </p-descriptions-item>
        </p-descriptions>




        <div>
            <p-modal v-model="photoVisible" title="图片预览(非图片文件无法预览-需下载)" :footer="null" :width="1000">
                <img :src="photoUrl" class="myImg"/>
            </p-modal>
        </div>


        <p-modal v-model="resultVisible" title="Basic Modal" :footer="null" :closable="false">
            <p-result
                    status="success"
                    title="处理完成！"
                    :sub-title="resultSubTitle"
            >
                <template #extra>

                </template>
            </p-result>
        </p-modal>

    </p-card>
</template>

<script>
    import { postAction, getAction, deleteAction } from "@/api/manage";
    import { JeecgListMixin } from "@/mixins/JeecgListMixin";
    import { api ,putAction } from "@/api/manage";
    import JSuperQuery from "@/components/jeecg/JSuperQuery.vue";
    import { filterObj } from "@/utils/util";

    import Vue from "vue";
    import moment from 'moment';
    import process from '@/api/process';
    import  dayjs   from 'dayjs'
    export default {
        name: "MesQcInspectTemplateApproval",
        data(){
            return {
                value:'',
                photoUrl:'',
                result:'process_over',
                curUrl: '',
                photoVisible:false,
                resultVisible:false,
                resultSubTitle:'',
                processInstanceId:0,
                activeName:'first',


                templateTableColumns:[
                    {
                        title: '工站',
                        align: 'center',
                        dataIndex: 'workstationname',
                    },
                    {
                        title: '检验项目',
                        align: 'center',
                        dataIndex: 'mesQcInspectIndexLibrary.inspectProjectName',
                    },
                    {
                        title: '检验标准',
                        align: 'center',
                        dataIndex: 'mesQcInspectIndexLibrary.inspectStandard',

                    },
                    {
                        title: '值类型',
                        align: 'center',
                        dataIndex: 'valueType',
                        customRender:(text)=>{
                            if(!text){
                                return '';
                            }else{
                                return text==1?'计量型':'计数型';
                            }

                        }
                    },
                    {
                        title: '检验手段',
                        align: 'center',
                        dataIndex: 'mesQcInspectIndexLibrary.inspectMethod',
                        customRender:(text)=>{
                            if(!text){
                                return '';
                            }else{
                                return this.inspectMethodMap[text].title
                            }

                        }
                    },
                    {
                        title: '标准值',
                        align: 'center',
                        dataIndex: 'standardValue',

                    },
                    {
                        title: '单位',
                        align: 'center',
                        dataIndex: 'standardUnit',
                        customRender:(text)=>{
                            if(!text){
                                return ''
                            }else{
                                return  this.templateUnitMap[text]?this.templateUnitMap[text].title:'';
                            }
                        },
                    },
                    {
                        title: '上限值',
                        align: 'center',
                        dataIndex: 'upperValue',

                    },
                    {
                        title: '下限值',
                        align: 'center',
                        dataIndex: 'downValue',

                    },
                    {
                        title: '参数',
                        align: 'center',
                        dataIndex: 'param',

                    },
                    {
                        title: '缺陷等级',
                        align: 'center',
                        dataIndex: 'flawLevel',
                        customRender:(text)=>{
                            if(!text){
                                return ''
                            }else{
                                return  this.errLevelMap[text]?this.errLevelMap[text].title:'';
                            }
                        },

                    },
                ],

                templateTableColumns1:[
                    {
                        title: '检验项目',
                        align: 'center',
                        dataIndex: 'mesQcInspectIndexLibrary.inspectProjectName',

                    },
                    {
                        title: '检验标准',
                        align: 'center',
                        dataIndex: 'mesQcInspectIndexLibrary.inspectStandard',
                    },
                    {
                        title: '值类型',
                        align: 'center',
                        dataIndex: 'valueType',
                        customRender:(text)=>{
                            if(!text){
                                return '';
                            }else{
                                return text==1?'计量型':'计数型';
                            }
                        }
                    },
                    {
                        title: '检验手段',
                        align: 'center',
                        dataIndex: 'mesQcInspectIndexLibrary.inspectMethod',
                        customRender:(text)=>{
                            if(!text){
                                return '';
                            }else{
                                return this.inspectMethodMap[text].title
                            }

                        }
                    },
                    {
                        title: '标准值',
                        align: 'center',
                        dataIndex: 'standardValue',
                    },
                    {
                        title: '单位',
                        align: 'center',
                        dataIndex: 'standardUnit',
                        customRender:(text)=>{
                            if(!text){
                                return ''
                            }else{
                                return  this.templateUnitMap[text]?this.templateUnitMap[text].title:'';
                            }
                        },
                    },
                    {
                        title: '上限值',
                        align: 'center',
                        dataIndex: 'upperValue',
                    },
                    {
                        title: '下限值',
                        align: 'center',
                        dataIndex: 'downValue',
                    },
                    {
                        title: '参数',
                        align: 'center',
                        dataIndex: 'param',
                    },
                    {
                        title: '缺陷等级',
                        align: 'center',
                        dataIndex: 'flawLevel',
                        customRender:(text)=>{
                            if(!text){
                                return ''
                            }else{
                                return  this.errLevelMap[text]?this.errLevelMap[text].title:'';
                            }
                        },
                    },
                ],

                detailTableColumns:[
                    {
                        title: "序号",
                        dataIndex: "",
                        key: "rowIndex",
                        width: 60,
                        align: "center",
                        customRender: function (t, r, index) {
                            return parseInt(index) + 1;
                        },
                    },
                    {
                        title: "产品编码",
                        align: "center",
                        dataIndex: "mcode",
                    },
                    {
                        title: "产品名称",
                        align: "center",
                        dataIndex: "mname",
                    },
                    {
                        title: "创建人",
                        align: "center",
                        dataIndex: "createBy",
                    },

                    {
                        title: "创建日期",
                        align: "center",
                        dataIndex: "createTime",
                    },
                    {
                        title: '创建者',
                        align: 'center',
                        dataIndex: 'createBy',
                    },
                    {
                        title: '创建日期',
                        align: 'center',
                        dataIndex: 'createTime',
                        customRender:(text)=>{
                            if(!text){
                                return '';
                            }else{
                                return dayjs(text).format('YYYY-MM-DD')
                            }
                        }
                    },
                    {
                        title: '修改者',
                        align: 'center',
                        dataIndex: 'updateBy',
                    },
                    {
                        title: '修改日期',
                        align: 'center',
                        dataIndex: 'updateTime',
                        customRender:(text)=>{
                            if(!text){
                                return '';
                            }else{
                                return dayjs(text).format('YYYY-MM-DD')
                            }
                        }
                    },
                ],
                detailTableData:[],
                recordColumns:[
                    {
                        title: "创建时间",
                        align: "center",
                        dataIndex: "startTime",
                    },
                    {
                        title: "处理时间",
                        align: "center",
                        dataIndex: "endTime",
                    },
                    {
                        title: "节点名称",
                        align: "center",
                        dataIndex: "activityName",
                    },
                    {
                        title: "执行人",
                        align: "center",
                        dataIndex: "assigneeName",
                    },
                    {
                        title: "操作",
                        align: "center",
                        dataIndex: "operator",
                    },
                    {
                        title: "处理意见",
                        align: "center",
                        dataIndex: "comment",
                    },
                ],
                recordData:[],
                tableData:[],
                tableColumns:[
                    {
                        title: '模板编码',
                        align: 'center',
                        dataIndex: 'templateCode',
                        width:120,
                        scopedSlots: { customRender: "templateCode" },
                    },
                    {
                        title: '模板名称',
                        align: 'center',
                        width:220,
                        dataIndex: 'templateName',
                    },
                    {
                        title: '模板类型',
                        align: 'center',
                        dataIndex: 'templateType',
                        customRender:(text)=>{
                            if(!text){
                                return ''
                            }else{
                                return  this.templateTypeMap[text]?this.templateTypeMap[text].title:'';
                            }
                        },
                    },
                    {
                        title: '二级工序编码',
                        align: 'center',
                        dataIndex: 'processTwoCode',

                    },
                    {
                        title: '二级工序名称',
                        align: 'center',
                        dataIndex: 'processTwoName',
                    },
                    {
                        title: '是否供应商模板',
                        align: 'center',
                        dataIndex: 'isCustTemplate',
                        customRender: (text) => {
                            if (!text) {
                                return ''
                            } else {
                                if(text==1){
                                    return <p-tag color="green"> <div style="color:#00FF00">是</div></p-tag>;
                                }else {
                                    return <p-tag color="red"> <div style="color:red">否</div></p-tag>;
                                }
                            }
                        },

                    },


                    {
                        title: "创建人",
                        align: "center",
                        dataIndex: "createBy",
                    },
                    {
                        title: "创建日期",
                        align: "center",
                        dataIndex: "createTime",
                        customRender: function (text) {
                            return !text ? "" : text.length > 10 ? text.substr(0, 10) : text;
                        },
                    },
                    {
                        title: "更新人",
                        align: "center",
                        dataIndex: "updateBy",
                    },
                    {
                        title: "更新日期",
                        align: "center",
                        dataIndex: "updateTime",
                        customRender: function (text) {
                            return !text ? "" : text.length > 10 ? text.substr(0, 10) : text;
                        },
                    },
                    {
                        title: "备注",
                        align: "center",
                        width:220,
                        dataIndex: "remark",
                    },

                ],

                fileTypeList:[],
                fileTypeMap:[],

                templateTypeList:[],
                templateTypeMap:[],

                errLevelList:[],
                errLevelMap:[],

                templateUnitList:[],
                templateUnitMap:[],



            };

        },

        computed: {

        },

        created() {
            this.initTemplateUnitList();
            this.initErrLevelList();
            this.initTemplateTypeList();
            this.initInspectMethodList();
            this.initTableData()
            this.queryRecord();
            this.getProcessPicture();
        },

        methods: {
            moment,
            //封装listToMap
            listToMap(list,name){
                let map = {};
                for(let i in list){
                    map[list[i][name]] = list[i];
                }
                return map;
            },

            initInspectMethodList(){
                getAction('/basic-business/sys/dict/queryDictItemsByCode',{dictCode:'mes_inspect_method'}).then(res=>{
                    if(res.success){
                        this.inspectMethodList = res.data;
                        this.inspectMethodMap = this.listToMap(this.inspectMethodList,'value');
                    }
                })
            },



            initErrLevelList(){
                getAction('/basic-business/sys/dict/queryDictItemsByCode',{dictCode:'mes_err_level'}).then(res=>{
                    if(res.success){
                        this.errLevelList = res.data;
                        this.errLevelMap = this.listToMap(this.errLevelList,'value');
                    }
                })
            },

            initTemplateUnitList(){

                getAction('/basic-business/sys/dict/queryDictItemsByCode',{dictCode:'mes_details_tamplate_unit'}).then(res=>{
                    if(res.success){
                        this.templateUnitList = res.data;
                        this.templateUnitMap = this.listToMap(this.templateUnitList,'value');
                    }
                })
            },

            getProcessPicture(){
                process.getProcessPicture(this.$route.query.processInstanceId).then( res =>{
                    this.curUrl = res.data;
                    // this.curUrl = 'http://localhost/index.html?processInstanceId=380001&processDefinitionId=XSSL:1:372582';
                })
            },
            initTableData(){//this.$route.query.processInstanceId
                getAction('/mes-quality/mesQcInspectTemplateMaintain/selectSendTemplateByProcessId/'+this.$route.query.processInstanceId).then(res=>{
                    if(res.success){
                        let data = res.data;
                        console.log(moment(data.createTime,'YYYY-MM-dd HH:mm'))
                        data.createTime = dayjs(data.createTime).format('YYYY-MM-DD HH:mm');
                        data.updateTime = dayjs(data.updateTime).format('YYYY-MM-DD HH:mm');
                        data.key = 1;
                        let dataList = [];
                        dataList.push(data);
                        this.tableData = dataList;
                        this.activeName = this.$route.query.activeName;
                        this.processInstanceId = this.$route.query.processInstanceId;

                    }else{
                        this.$message.warning(res.msg);
                    }
                })
            },
           initTemplateTypeList(){
               getAction('/basic-business/sys/dict/queryDictItemsByCode',{dictCode:'mes_template_type'}).then(res=>{
                   if(res.success){
                       this.templateTypeList = res.data;
                       this.templateTypeMap = this.listToMap(this.templateTypeList,'value');
                   }
               })
           },


            queryRecord(){
                getAction('/poros-bpmengine/task/getTaskRecordList/?processInstanceId='+this.$route.query.processInstanceId).then(res=>{
                    if(res.success){
                        let data = res.data;
                        let key = 1;
                        data.forEach(item=>{
                            item.key =key;
                            key = key+1;
                        })
                        this.recordData = data;
                    }else{
                        this.$message.warning(res.msg);
                    }
                })
            },

            submitData(){

                let flag = true;

                if(this.result == 'task_reject'){
                    if(this.value==''){
                        flag = false;
                        this.$message.error('驳回时必须填写处理意见！');
                    }
                }

                if(flag){
                    let data = {
                        changeType:this.result,
                        processInstanceId:this.$route.query.processInstanceId,
                        taskId:this.$route.query.taskId,
                        opinion:this.value,
                    }
                    postAction('/mes-quality/inspectTemplate/callback',data).then(res=>{
                        if(res.success){
                            this.resultVisible = true;
                            this.timeReset(5);
                        }else{
                            this.$message.warning(res.msg);
                        }
                    })
                }

            },

            timeReset(time){
                if(time == 0) {
                    window.close();
                } else {
                    let that = this;
                    this.resultSubTitle = "本页面将于 " + time + " 秒后自动关闭"
                    time--;
                    setTimeout(function () {
                            that.timeReset(time);
                        },
                        1000);
                }
            },



        },
    }
</script>

<style scoped>

</style>